<template>
  <div class="index">
    <x-header class="header" :left-options="{showBack: false}">主页</x-header>
    <div class="topHolder"></div>
    <card style="margin-top: 0">
      <div slot="content" class="card-padding info">
        <i class='iconfont icon-userinfo personalInfo' @click="gotoPage({path:'/personalInfo'})"></i>
        <!--<i class='iconfont icon-talk message' @click="gotoPage({path:'/noticeList'})"></i>-->
        <div class="avatar">
          <x-img :src="weixinInfo.headimgurl" :offset="0"></x-img>
        </div>
        <div class="name" v-html="weixinInfo.nickname"></div>
      </div>
    </card>
    <group-title>我的操作</group-title>
    <grid :cols="4" style="background: #fff;">
      <grid-item class="indexIcon" v-for="(item,index) in menusList" :key="index" v-if="item.auth" :link="item.path">
        <i class='iconfont' :class="[item.icon,item.class]"></i><br/>
        <div class="text" v-html="item.name"></div>
      </grid-item>
    </grid>
  </div>
</template>

<script>
  import { Badge, Card ,XImg, Grid, GridItem, GroupTitle } from 'vux'

  export default {
    name: 'index',
    components: {
      Badge,
      Card,
      XImg,
      Grid,
      GridItem,
      GroupTitle
    },
    data () {
      return {
        loadingStatus:true,
        menusList:{
          'subscribeServices':{'auth':false,'name':'我的预订','path':{ path: '/subscribeServices'},'icon':'icon-yuding','class':'red'},
          'keepServices':{'auth':true,'name':'我的存酒','path':{ path: '/keepServices'},'icon':'icon-jiu','class':'blue'},
          'buyTicket':{'auth':false,'name':'购买门票','path':{ path: '/buyTicket'},'icon':'icon-wenzhanghuoke-','class':'lightBlue'},
          'ticketExchange':{'auth':false,'name':'门票兑换','path':{ path: '/ticketExchange'},'icon':'icon-yudingshu','class':'orange'},
          'memberShipCard':{'auth':true,'name':'会员卡','path':{ path: '/memberCard'},'icon':'icon-membership-card_icon','class':'purple'},
          'callServices':{'auth':true,'name':'呼叫服务','path':{ path: '/callServices'},'icon':'icon-xiaoxitongzhi','class':'green'},
          'creditsShop':{'auth':false,'name':'积分商城','path':{ path: '/creditsShop'},'icon':'icon-jifenshangcheng','class':'lightGreen'},
          'contactUs':{'auth':false,'name':'联系我们','path':{ path: '/contactUs'},'icon':'icon-phone1','class':'skyBlue'}
        }
      }
    },
    computed:{
      weixinInfo(){
        return this.$store.getters.getWeiXinInfo//因为要等待app.vue的api执行完，首页只能通过vuex存储来获取
      }
    },
    methods:{
      gotoPage(param){
        this.$router.push(param)
      }
    },
    mounted(){
      //alert( " 屏幕分辨率的高：" + window.screen.height+ "\n" + " 屏幕分辨率的宽：" + window.screen.width);
      this.$store.commit('updateLoadingStatus',{isLoading:false})
    }
  }
</script>

<style lang="scss" scoped>
  .index{
    .info{
      position: relative;text-align: center;color: #fff;background: url("../assets/images/indexBg.jpg");background-size: 100%;
      .message,.personalInfo{position: absolute;}
      .personalInfo{top: 1rem;left: 1rem;font-size:1.5rem;}
      .message{top: 1rem;right: 1rem;font-size:1.7rem;}
      .avatar{
        margin-top:2.5rem;text-align: center;
        img{width:6rem;border-radius: 6rem;}
      }
      .name{margin: 0.5rem 0;}
    }
    .indexIcon{
      text-align: center;position: relative;
      .tips{
        position: absolute;left:6.5rem;top:1.2rem;
        .vux-badge{height:1.5rem;line-height:1.5rem;width:1.5rem;font-size:1rem;border-radius:1rem;}
      }
      .iconfont{
        font-size: 2rem;
        &.red{color:rgb(229, 28, 35);}
        &.blue{color:rgb(63, 81, 181);}
        &.lightBlue{color:rgb(0, 150, 136);}
        &.orange{color:rgb(255, 152, 0);}
        &.purple{color:rgb(255, 64, 129);}
        &.green{color:rgb(37, 155, 36);}
        &.lightGreen{color:rgb(139, 195, 74);}
        &.skyBlue{color:rgb(73, 170, 253);}
      }
      .text{margin-top: 0.5rem;}
    }
  }
</style>
